<template>
  <div>
    <div><label>手机号:</label><BaseInput v-model="mobile" ref="mobileIpt" /></div>
    <div class="bottom-box">
      <div class="right-content">
        <BaseButton @click="register" type="primary">注册</BaseButton>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MobileBox',
  data() {
    return {
      mobile: '18888888888',
    }
  },
  methods: {
    setFocus() {
      this.$refs.mobileIpt.focus()
    },
    // 注册方法
    register() {
      // 手机正则
      const reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/
      // test 判断是否符合
      // console.log(reg.test(this.mobile))
      if (reg.test(this.mobile) === false) {
        alert('手机号格式有误')
      } else {
        // 注册成功
        alert('注册成功，请登录')
      }
    },
  },
  mounted() {
    this.setFocus()
  },
  activated() {
    this.setFocus()
  },
}
</script>

<style lang="less" scoped>
.bottom-box {
  display: flex;
  justify-content: flex-end;
  padding: 0 40px;
  padding-left: 90px;
}
.login-title {
  color: #252526;
  font-weight: normal;
}

label {
  display: inline-block;
  width: 60px;
  text-align: right;
}
</style>
